<template>
    <div id="info" ref="info">
        <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
        <h2>更新dom节点style属性</h2>
        <p>Creating a tween and doing little else apart from that :)</p>
    </div>
</template>
  
<script setup lang="ts">
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
import { ref, onMounted } from "vue";
const info = ref<HTMLElement>(null);

function init() {
    var output = document.createElement('div')
    output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px'
    info.value.appendChild(output)

    var tween = new TWEEN.Tween({ x: 50, y: 0 })
        .to({ x: 400 }, 2000)
        .easing(TWEEN.Easing.Elastic.InOut)
        .onUpdate(function (object) {
            output.innerHTML = 'x == ' + Math.round(object.x)
            var transform = 'translateX(' + object.x + 'px)'
            output.style.webkitTransform = transform
            output.style.transform = transform
        })
        .start()

    animate();
}
function animate() {
    requestAnimationFrame(animate);
    TWEEN.update()
}

onMounted(() => {
    init();
})

</script>
  
<style></style>
  